import React from 'react';
import { useIntl } from 'umi';

import { Button, Form, Input, Card, Select, Row, Col } from 'antd';
import style from './index.less';
const Exchange: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <div className={style.exchangeboss}>
      <div className={style.exchangeForm}>
        <Card
          // title="换汇"
          title={t('menu.Exchange')}
          extra={<a href="#">More</a>}
          style={{ width: '100%', height: '100%', textAlign: 'left' }}
        >
          <Form
            style={{ width: '100%' }}
            name="nest-messages"
            onFinish={onFinish}
          >
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="子商户"
                  label={t('form.Submerchantname')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="锁定方"
                  label={t('form.LockingParty')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="卖出币种"

                  label={t('form.Sellingcurrency')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="付款账户"
                  label={t('form.PayAccount')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="买入币种"
                  label={t('form.Buycurrency')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  // label="收款账户"
                  label={t('form.Collectaccount')}
                >
                  <Select>
                    <Select.Option value="demo">Demo</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  // label="卖出金额"
                  label={t('form.Salesamount')}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={t('form.Exchangerate')}
                  // label="汇率"
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  label={t('form.Purchaseamount')}
                  // label="买入金额"
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}></Col>
            </Row>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    {/* 提交 */}
                    {t('form.Submit')}
                  </Button>
                </Form.Item>
              </Col>
              <Col span={12}></Col>
            </Row>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Exchange;
